import React, { useEffect, useState, useCallback } from 'react';
import { connect } from 'dva';
import { Button, Drawer } from 'antd';
import BoardDrawer from './components/BoardDrawer';
import DataCardList from './components/DataCardList';
import ChartCardList from './components/ChartCardList/index';
import style from './DataBoard.css';

function DataBoardManager({ dispatch, user, board }) {
    const { boardList, currentIndex, loaded, statusSourceData, fieldMaps, chartMaps } = board;
    const { theme, containerWidth } = user;
    const currentBoard = boardList.filter((i) => i.key === currentIndex )[0] || {};
    const [visible, setVisible] = useState(false);
    const handleDispatch = useCallback((action) => {
        dispatch(action);
    }, []);
    useEffect(()=>{
        dispatch({ type:'board/init'});
    },[])
    console.log(currentBoard);
    return (
        <div style={{ height: '100%', position:'relative', padding:'1rem 1rem 0 1rem' }}>
            { loaded && <Button type='primary' style={{ position:'absolute', top:'1rem', right:'1rem' }} onClick={()=>setVisible(true)}>看板设置</Button> }
            <div className={style['nav-container']}>
                { boardList.map((item) => (
                    <div
                        className={style['nav-item'] + ' ' + ( item.key === currentIndex ? style['selected'] : '' )}
                        key={item.key}
                        onClick={()=>dispatch({ type:'board/setCurrentIndex', payload:item.key })}
                    >
                        { item.label }
                    </div>
                )) }
            </div>
            <div style={{ height: '140px', overflow: 'hidden' }}>
                { loaded && <DataCardList
                    list={currentBoard.dataCardList.filter((i) => i.a)}
                    data={statusSourceData}
                    theme={theme}
                    containerWidth={containerWidth}
                    fieldMaps={fieldMaps}
                /> }
            </div>
            <div style={{ height: 'calc( 100% - 180px)' }}>
                { loaded && <ChartCardList
                    list={currentBoard.chartCardList.filter(i=>i.a)}
                    theme={theme}
                    chartMaps={chartMaps}
                    onDispatch={handleDispatch}
                /> }
            </div>
            
            <Drawer
                width="40%"
                open={visible}
                className={style['custom-drawer']}
                onClose={() => setVisible(false)}
                closable={false}
                maskClosable={false}
                headerStyle={{ display: 'none' }}
                bodyStyle={{ padding: '0' }}
            >
                <BoardDrawer
                    onDispatch={handleDispatch}
                    data={boardList}
                    fieldMaps={fieldMaps}
                    chartMaps={chartMaps}
                    onClose={() => setVisible(false)}
                />
            </Drawer>
        </div>
    )
}

export default connect(({ user, board }) => ({ user, board }))(DataBoardManager);